<template>
  <div>
    <div class="bodyTop">
      <el-upload
        class="upload-demo"
        action="http://47.98.246.42:8080/Oss/upload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-success="successUpload"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" class="browserButton" style="margin-top:50px;margin-left:40vw">点击上传</el-button>
      </el-upload>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="8" v-for="(i, key) in bannerInfo" :key="key">
          <el-card class="mainBanner">
            <img class="imageMain" :src="i.url" alt="" />
            <el-button class="deleteButton buttonPostion" @click="deleteBannerById(i.id)"
              >删除</el-button
            >
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getBanner, deleteBanner } from "@/api/banner";
export default {
  created() {
    this.getAllBanner();
  },
  data() {
    return {
      bannerInfo: [],
      fileList: [],
    };
  },
  methods: {
    getAllBanner() {
      getBanner().then((res) => {
        this.bannerInfo = res.data.list;
        console.log(this.bannerInfo);
      });
    },
    deleteBannerById(id) {
      this.$confirm("此操作将永久删除该单位, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteBanner(id).then((res) => {
            this.getAllBanner();
            console.log(res);
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    successUpload() {
      this.getAllBanner();
    },
  },
};
</script>

<style lang="scss" scoped>
.mainBanner {
  border-radius: 5px;
  position: relative;
}
.imageMain {
  width: 350px;
  height: 200px;
}
.el-col {
  margin-top: 10px;
}
.bodyTop{
  margin-bottom: 20px;
  padding: 5px;
}
.buttonPostion{
  position: absolute;
  right: 15px;
  bottom: 15px;
}
</style>